<template>
    <div>
        <el-dialog title="综合成绩详情" :visible.sync="state" :show-close="true" :close-on-click-modal="false" width="200">
            <div class="components_searchs">
                  <table>
                        <tr>
                            <td>
                                学校：{{schoolInfo.trainPlan.schoolName}}
                            </td>
                            <td>
                                学院：{{schoolInfo.trainPlan.secondSchoolName}}
                            </td>
                            <td>
                                专业：{{schoolInfo.trainPlan.professionName}}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                班级：{{schoolInfo.className}}
                            </td>
                            <td>
                                课程：{{schoolInfo.courseName}}
                            </td>
                            <td>
                                讲师：{{schoolInfo.teacherName}}
                            </td>
                        </tr>
                  </table>
            </div>


             <!-- 选项卡  -->
            <el-tabs v-model="tab.selectTabName" type="border-card">
                <el-tab-pane label="学生成绩" name="studentScore">
                    <div id="queryDiv" class="components_searchs">
                            <span class="tit">学号：</span>
                            <el-input v-model="table.queryParams.studentNumber" auto-complete="off">
                            </el-input>

                            <span class="tit">姓名：</span>
                            <el-input v-model="table.queryParams.studentName" auto-complete="off">
                            </el-input>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </div>
                    <table class="el-table el-table--fit el-table--border el-table--enable-row-transition">
                        <thead>
                            <tr>
                                <th style="width:40px">序号</th>
                                <th style="width:100px">学号</th>
                                <th style="width:80px">姓名</th>
                                <th style="width:80px">考试成绩</th>
                                <th style="width:80px">作业成绩</th>
                                <th style="width:80px">考勤成绩</th>
                                <th>课堂表现</th>
                                <th>综合成绩</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="(item, index) in table.dataList" v-show="!item.isHidden">
                                <td>
                                    {{ index + 1}}
                                </td>
                                <td>
                                    {{ item.studentNumber }}
                                </td>
                                <td>
                                    {{ item.studentName }}
                                </td>
                                <td>
                                    {{ item.examScore }}
                                </td>
                                <td>
                                    {{item.homeWorkScore }}
                                </td>
                                <td>
                                    {{ item.attendanceScore }}
                                </td>
                                <td>
                                    {{ item.dailyPerformanceScore }}
                                </td>
                                <td>
                                    {{ item.comprehensiveScore }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>

                <el-tab-pane label="综合分析" name="comprehensiveScore">
                    <table>
                        <tr style="width:500px;">
                            <td>
                                成绩分布百分比
                            </td>
                            <td>
                                成绩分布图
                            </td>
                        </tr>
                        <tr >
                            <td>
                                <!-- 成绩百分比table -->
                                <table>
                                    <tr>
                                        <td width="33.33%">分数段</td>
                                        <td width="33.33%">比例</td>
                                        <td>人数</td>
                                    </tr>

                                    <tr  v-for="item in analysisData.scoreList" :key="item.id">
                                        <td>{{item.style}}</td>
                                        <td class="text-left">{{item.percent + "%"}}</td>
                                        <td>{{item.num}}</td>
                                    </tr>
                                </table>
                            </td>
                            <!-- 统计图 -->
                            <td rowspan="3" width="300">
                                <chart
                                    :options="pieOption"
                                    ref="pieChart"
                                    auto-resize
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                阈值统计
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <!-- 阈值table -->
                               <table>
                                    <tr>
                                        <td>平均成绩</td>
                                        <td>{{analysisData.avgComprehensiveScore}}</td>
                                    </tr>
                                    <tr>
                                        <td>最高分</td>
                                        <td>{{analysisData.maxComprehensiveScore}}</td>
                                    </tr>
                                    <tr>
                                        <td>最低分</td>
                                        <td>{{analysisData.minComprehensiveScore}}</td>
                                    </tr>
                                    <tr>
                                        <td>及格率</td>
                                        <td>{{analysisData.notFailedPercent + "%"}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </el-tab-pane>
            </el-tabs>

            <div slot="footer" class="dialog-footer">
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import VueECharts from 'vue-echarts/components/ECharts.vue'

    import 'echarts/lib/chart/pie'
    import 'echarts/lib/component/tooltip'
    import 'echarts/lib/component/legend'
    import 'echarts/lib/component/title'
    export default {
        components: {
            "chart": VueECharts
        },
        data() {
            return {
                self: this,
                state: false,
                classId: null,
                courseNo: null,
                // 院校基本信息
                schoolInfo: {
                    trainPlan:{},
                },
                // 图表分析数据
                analysisData: {},
                table:{
                    dataList: null,   // 表格数据
                    queryParams: {
                        studentName:null,  //学生名称
                        studentNumber: null   //学号
                    }
                },
                // tab组件
                tab: {
                    selectTabName: 'studentScore', //默认选中选项卡
                },
                //  chart组件
                pieOption:{
                     /* title: {
                        text: '饼图程序调用高亮示例',
                        x: 'center'
                    }, */
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c}人({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:[]
                    },
                    series: [
                        {
                            name:'成绩分析',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '15',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[]
                        }
                    ]
                }
            }
        },
        created() {
        },
        mounted() {},
        computed: {},
        methods: {
            // 打开模态框
            showDialog(classId, courseNo){
                this.classId = classId;
                this.courseNo = courseNo;
                // 获取基本院校信息
                this.getSchoolInfo();
                // 查询学生列表
                this.getStudentList();
                // 查询图表分析数据
                this.getAnalysisData();
                this.state = true;
                this.table.queryParams.studentNumber = null;
                this.table.queryParams.studentName = null;
            },
            // 获取学生数据
            getSchoolInfo() {
                let vm = this;
                vm.axios.get(api.trainPlan.queryByClassIdAndCourseNo,{
                    params:{
                        classId : vm.classId,
                        courseNo: vm.courseNo,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        if(!_.isEmpty(response.data.data)){
                             vm.schoolInfo = JSON.parse(JSON.stringify(response.data.data[0]));
                        }
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取学生数据
            getStudentList() {
                let vm = this;
                vm.axios.get(api.studentComprehensiveScore.queryById,{
                    params:{
                        classId : vm.classId,
                        courseNo: vm.courseNo,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        // this.studentScoreList = JSON.parse(JSON.stringify(response.data.data));
                        // 填充表格数据
                        vm.table.dataList = JSON.parse(JSON.stringify(response.data.data));
                        vm.table.dataList.forEach((item)=>{
                            vm.$set( item, "isHidden", false );
                            if(item.score == null){
                                vm.$set( item, "score", 0 );
                            }
                            if(item.remark == null){
                                vm.$set( item, "remark", "" );
                            }
                        })
                        // console.log(vm.table.dataList)
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取学生数据
            getAnalysisData() {
                let vm = this;
                vm.axios.get(api.studentComprehensiveScore.analysisScore,{
                    params:{
                        classId : vm.classId,
                        courseNo: vm.courseNo,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        if(!_.isEmpty(response.data.data)){
                            vm.analysisData = JSON.parse(JSON.stringify(response.data.data[0]));
                            vm.initChart();
                        }
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 初始化图表
            initChart(){
                let vm = this;
                vm.pieOption.legend.data.splice(0);
                vm.pieOption.series[0].data.splice(0);
                vm.analysisData.scoreList.forEach((item)=>{
                    vm.pieOption.legend.data.push(item.style);
                    vm.pieOption.series[0].data.push({'name':item.style, 'value':item.num});
                });

            },
            submit(){
                let vm = this;
                // 处理数据
                let modelArr = vm.table.dataList.map((item)=>{
                    let model = {
                    }
                    return null;
                })
                // console.log(vm.table.dataList);
                //return;
                vm.axios.post(api.studentAttendanceScore.update, vm.table.dataList)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                type: 'success',
                                message: response.data.msg,
                            });
                            // 关闭弹出窗口
                            vm.state = false;
                            // 刷新table
                            vm.$parent.$refs.classTable.$emit('vuetable:refresh');
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                })
            },
            queryTable(){
                let vm = this;
                // 学号不为空
                let numberCondition = vm.table.queryParams.studentNumber != null
                        && vm.table.queryParams.studentNumber !== "";
                // 名称不为空
                let nameCondition = vm.table.queryParams.studentName != null
                        && vm.table.queryParams.studentName !== "";
                // 学号 && 名称查询
                if(numberCondition && nameCondition){
                    vm.table.dataList.forEach((item,index)=>{
                        if(item.studentNumber.indexOf(vm.table.queryParams.studentNumber) > -1
                            && item.studentName.indexOf(vm.table.queryParams.studentName) > -1){
                            item.isHidden = false;
                        }else{
                            item.isHidden = true;
                        }
                    })
                }else if(nameCondition){     //名称查询
                    vm.table.dataList.forEach((item,index)=>{
                        if(item.studentName.indexOf(vm.table.queryParams.studentName) > -1){
                            item.isHidden = false;
                        }else{
                            item.isHidden = true;
                        }
                    })
                }else if(numberCondition){     //学号查询
                    vm.table.dataList.forEach((item,index)=>{
                        if(item.studentNumber.indexOf(vm.table.queryParams.studentNumber) > -1){
                            item.isHidden = false;
                        }else{
                            item.isHidden = true;
                        }
                    })
                }
            },
            resetQuery(){
                this.table.queryParams.studentNumber = null;
                this.table.queryParams.studentName = null;
                this.table.dataList.forEach((item) => {
                    item.isHidden = false;
                })
            },
        },
    };
</script>
<style scoped>
table {
    width: 100%;
}
table td,table th{
    font-size: 12px;
    border: 1px solid #DADADA;
    text-align: center;
    vertical-align: middle;
}
table th{
    background: #F7F7F7;
}
table td.text-left{ padding-left:85px; }
.el-input{ padding:0 10px; }
.el-table tr td:last-child{
    border-right: 1px solid #DADADA;
}
/* table,tr,td{
    font-size: 12px;
    border: 1px solid #dadada;
    color: #666;
}
table{
    width: 100%;
}
td{
    text-align: center;
    vertical-align: middle;
}
thead th{
    text-align: center;
    font-weight: bold;
    background: #fbfbfb;
}
tbody tr:nth-child(2n) td{
    background: #f9f9f9;
}*/
.echarts {
  height: 400px;
  width: 200px;
  margin: 0 auto;
}
</style>